<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      placeholder="总共有100件商品可选"
      input-align="center"
    />
    <van-tree-select
      height="100vh"
      :items="items"
      :main-active-index.sync="activeIndex"
      @click-nav="changeRight"
    >
      <template #content>
        <img class="bannerImg" :src="bannerImg" alt="" />
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(value, index) in subCategoryList"
            :key="index"
            :icon="value.wap_banner_url"
            :text="value.name"
            :to="'categorylist/'+value.id"
          />
        </van-grid>
      </template>
    </van-tree-select>
    <tab-btn></tab-btn>
  </div>
</template>

<script>
import tabBtn from "@/components/tabBtn";
import TabBtn from "../components/tabBtn.vue";
import api from "../assets/config/api";
import axios from "axios";
export default {
  data() {
    return {
      data: {},
      activeIndex: 0,
      searchValue: "",
      subCategoryList: {},
      bannerImg: "",
    };
  },
  computed: {
    items: function () {
      //items: [{ text: '分组 1' }, { text: '分组 2' }]
      let arr = [];
      if (this.data.categoryList != undefined) {
        this.data.categoryList.forEach((item) => {
          item.text = item.name;
          arr.push(item);
        });
        return arr;
      } else {
        return [];
      }
    },
  },
  watch: {
    activeIndex: async function () {
      if (this.items.length != 0) {
        let id = this.items[this.activeIndex].id;
        let res = await axios.get(api.CatalogCurrent, { params: { id} });
        console.log(res);
        this.subCategoryList = res.data.data.currentCategory.subCategoryList;
        console.log(this.subCategoryList);
        this.bannerImg = res.data.data.currentCategory.img_url;
      } else {
        this.subCategoryList = [];
      }
    },
  },
  methods: {
    changeRight: function (index) {
      this.activeIndex = index;
      //console.log(index)
    },
  },
  async created() {
    //获取数据
    let res = await axios.get(api.CatalogList);
    this.data = res.data.data;
    console.log(res.data.data);
    this.subCategoryList = this.data.currentCategory.subCategoryList;
    this.bannerImg = this.data.currentCategory.img_url;
  },
  components: {
    tabBtn,
  },
};
</script>

<style lang="less" scoped>
.bannerImg {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
</style>